<template>
    <div>
        <div align="right" style="margin-bottom: 20px">
            <el-button type="primary" size="mini" @click="backHome">返回主页</el-button>
        </div>
        <el-row>
            <el-col :span="15">
                <div class="details_title">环境查看</div>
            </el-col>
            <el-col :span="9">
                <el-select v-model="soilName">
                    <el-option v-for="item in soilOption"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-divider></el-divider>

        <el-row style="margin-bottom: 20px">
            <el-col :span="8">
                <div class="son_title">环境图表</div>
            </el-col>
            <el-col :span="8">
                <el-date-picker v-model="barChartDate" size="mini"></el-date-picker>
            </el-col>
            <el-col :span="8">
                <el-button size="mini" @click="getChartsData">查询</el-button>
            </el-col>
        </el-row>
        <div id="environment_charts"></div>
        <el-divider></el-divider>

        <el-row style="margin-bottom: 20px">
            <el-col :span="8">
                <el-date-picker v-model="compareForDateDateValue" size="mini"></el-date-picker>
            </el-col>
            <el-col :span="8">
                <el-select v-model="targetValue" placeholder="请选择" size="mini">
                    <el-option
                            v-for="item in targetOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="8">
                <el-button size="mini" type="success" @click="initCompareForTargetCharts">查询</el-button>
                <!--                <el-button size="mini" type="dange" @click="initCompareForDateCharts">查询</el-button>-->
            </el-col>
        </el-row>
        <div id="environment_compare_for_date_charts"></div>
        <el-divider></el-divider>
        <!--        <div>环境图表</div>-->
    </div>
</template>

<script>
    import * as echarts from 'echarts';

    export default {
        name: "environment-charts",
        data() {
            return {
                environment: [],
                option: {
                    title: {
                        text: '环境指标',
                        // subtext: '数据来自机器',
                        textStyle: {
                            color: 'black'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['2021年'],
                        textStyle: {
                            color: 'black'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '3%',
                        // top: '5%',
                        bottom: '7%',
                        containLabel: true,

                        axisLabel: {
                            textStyle: {
                                color: 'black'
                            }
                        }
                    },
                    xAxis: {
                        type: 'value',
                        axisLabel: {
                            interval: 0, // 横轴信息全部显示
                            // rotate: -75, // -30度角倾斜显示
                            textStyle: {
                                // color: 'white',
                                fontSize: 15
                            }
                        }
                    },
                    yAxis: {
                        type: 'category',
                        boundaryGap: [0, 0.01],
                        data: [],
                        axisLabel: {
                            textStyle: {
                                color: 'black'
                            }
                        }
                    },
                    series: [
                        {
                            name: '2021年',
                            type: 'bar',
                            data: [],
                            color: '#395EFD',
                            label: {
                                show: true,
                                position: 'right'
                            }
                        }
                    ]
                },
                compareForDateDateValue: new Date(),
                barChartDate: new Date(),
                soilName: '',
                soilOption: [],
                targetValue: '',
                targetOptions: [],
                compareNeededOption:{
                    targetName: '',
                    series:[]
                },
                optionCompareMain:[],
                compareYears:[]
            }
        },
        watch:{
            environment(){
                this.$nextTick(function () {
                    this.initCharts();
                })
            },
            optionCompareMain(){
                this.$nextTick(function () {
                    this.initCompareByTargetCharts();
                })
            }
        },
        mounted() {
            this.getCropId();
            this.getIndicator();
        },
        methods: {
            /**     从后台获取地块id     **/
            getCropId() {
                let _this = this;
                this.$http.get('gengyun/indicator/getCropRotationId').then((res) => {
                    // console.log(res)
                    let soilId = res.data.stringListMap;
                    let length = soilId.length;
                    let soil = {
                        value: '',
                        label: ''
                    };
                    for (let i = 0; i < length; i++) {
                        soil.value = soilId[i];
                        soil.label = soilId[i];
                        // _this.$set(_this.soilOption , i , soil);
                        _this.soilOption[i] = soil;
                        soil = {
                            value: '',
                            label: ''
                        }
                    }
                  console.log(soil)
                    _this.soilName = _this.soilOption[0].value
                }).catch((error) => {
                    console.log(error)
                });
                this.getChartsData();
            },
            /**     获取对比的地块id数据     **/
            getIndicator(){
                let _this = this;
                let form = new FormData;
                form.append('target','环境指标');
                this.$http.post('gengyun/indicator/getIndicatorTarget',form).then((res) => {
                    let targetNames = res.data.stringListMap;
                    let length = targetNames.length;
                    let target = {
                        value: '',
                        label: ''
                    };
                    for (let i = 0; i < length; i++) {
                        target.value = targetNames[i];
                        target.label = targetNames[i];
                        _this.targetOptions[i] = target;
                        target = {
                            value: '',
                            label: ''
                        }
                    }
                    _this.targetValue = _this.targetOptions[0].value
                }).catch((error) => {
                    console.log(error)
                });
            },
            /**     获取图表数据     **/
            getChartsData() {
                let _this = this;
                setTimeout(() => {
                    let form = new FormData;
                    form.append('time', this.barChartDate.toLocaleDateString());
                    form.append('indicatorType', '环境指标');
                    this.$http.post('gengyun/indicator/getIndicatorsByTime', form).then((res) => {
                        let environment = res.data.indicatorsByTime;
                        if (environment === undefined || environment === null){
                            environment = []
                        }
                        let length = environment.length;
                        let environmentTemp = {
                            target: '',
                            data: ''
                        };
                        for (let i = 0; i < length; i++) {
                            environmentTemp.target = environment[i].indicator_name;
                            environmentTemp.data = environment[i].digit_value;
                            _this.$set(this.environment, i, environmentTemp);
                            environmentTemp = {
                                target: '',
                                data: ''
                            };
                        }
                    }).catch()
                }, 100);
            },
            /**     格式数据     **/
            initCharts() {
                let myChart = echarts.init(document.getElementById("environment_charts"));
                let environmentName = [];
                let environmentNum = [];
                let length = this.environment.length;
                for (let i = 0; i < length; i++) {
                    environmentName[i] = this.environment[i].target;
                    environmentNum[i] = this.environment[i].data;
                }
                this.option.yAxis.data = environmentName;
                let autoHeight = length * 70 + 50;
                this.option.series[0].data = environmentNum;
                myChart.resize({height: autoHeight});
                myChart.setOption(this.option)
            },
            /**     加载对比图表     **/
            initCompareByTargetCharts() {
                let optionCompareMain = this.optionCompareMain;
                let xAxis = [];
                let series = [];
                for (let i in optionCompareMain){
                    if (optionCompareMain.hasOwnProperty(i)){
                        series[i] = optionCompareMain[i].series;
                        xAxis[i] = optionCompareMain[i].xAxis
                    }
                }
                let option = {
                    title: {
                        text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: this.compareYears
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '8%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: xAxis,
                    yAxis: {
                        type: 'value'
                    },
                    series:series
                };
                console.log(option)
                let myChart = echarts.init(document.getElementById('environment_compare_for_date_charts'))
                myChart.resize({height: 300})
                myChart.setOption(option)

            },
            /**     获取对比数据     **/
            initCompareForTargetCharts() {
                setTimeout(()=>{
                    let _this = this;
                    let form = new FormData;
                    form.append('cropRotationId',this.soilName);
                    form.append('indicatorId',this.targetValue);
                    form.append('compareYears',this.compareForDateDateValue.getUTCFullYear().toString());
                    this.$http.post('gengyun/indicator/CompareIndicator',form).then((res)=>{
                        let result = res.data.stringListMap;
                        console.log(result)
                        let years = [];
                        for(let i in result){
                            if (result.hasOwnProperty(i)){
                                let optionCompareMain = {
                                    xAxis:[],
                                    series:[],
                                };
                                let xAxis = {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: result[i].dates
                                };
                                let series = {
                                    name: result[i].time,
                                    type: 'line',
                                    data: result[i].value
                                };
                                years[i] = result[i].time;
                                optionCompareMain.xAxis = xAxis;
                                optionCompareMain.series = series;
                                _this.$set(_this.optionCompareMain,i,optionCompareMain)
                                _this.compareYears = years;
                            }
                        }
                    }).catch((error)=>{
                        console.log(error)
                    })
                },100)
            },
            /**     回主页     **/
            backHome() {
                this.$router.push('/home/bar')
            }
        }
    }
</script>

<style scoped>

</style>
